<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--在 IE 运行最新的渲染模式-->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <!--初始化移动端浏览显示，让网页的宽度适应设备的宽度和禁止窗口缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--格式检测 telephone
    主要作用是是否设置自动将你的数字转化为拨号连接
    telephone=no 禁止把数字转化为拨号链接
    telephone=yes 开启把数字转化为拨号链接，默认开启

    email
    告诉设备不识别邮箱，点击之后不自动发送
    email=no 禁止作为邮箱地址
    email=yes 开启把文字默认为邮箱地址，默认情况开启

    adress
    adress=no 禁止跳转至地图
    adress=yes 开启点击地址直接跳转至地图的功能, 默认开启
    -->
    <!--<meta name="format-detection" content="telephone=no">-->
    <!--指定网页使用 webkit 引擎渲染，360 浏览器 6.5+ 有效-->
    <!--<meta name="renderer" content="webkit">-->
    <!--禁止百度移动搜索转码-->
    <!--<meta http-equiv="Cache-Control" content="no-siteapp" />-->
    <title>haha</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css"/>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>
    <title>客户余额管理</title>
    <style>
        .border-color:#000;
        .table-scroll {
                width: calc(100% - 5px);
                overflow-x: scroll;
                white-space: nowrap;
            }

            .table-scroll table {
                table-layout: fixed;
                width: calc(100% - 10px);
                background-color:darkseagreen ;
            }

            .table-scroll thead {
                display: table-row;
                background-color: bisque;
            }

            .table-scroll tbody {
                overflow-y: scroll;
                overflow-x: hidden;
                display: block;
                height: calc(100vh - 300px);
            }

            .table-scroll th,td {
                width: 160px;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 160px;
                border: 1px solid #808080;
            }

            h4, h5 {
                color: cornflowerblue;
            }
    </style>
    <script>
        $(function() {
            $('.table-scroll').scroll(function() {
                  $('.table-scroll table').width($('.table-scroll').width()
                  + $('.table-scroll').scrollLeft());
                });

                var tableTdWidths = new Array();
            var tableWidth = 0;
            var tableTr0Width = 0;
            var tableThNum = 0;
            var tableTr1Width = 0;

                tableWidth = $('.table-scroll').css('width');
                tableThNum = $('.table-scroll tr:eq(0)').children('th').length;

            if ($('.table-scroll tr').length == 1) { // header only
                if (tableWidth > tableTr0Width) {
                    $('.table-scroll tr:eq(0)').children('th').each(function(i){
                        $(this).width(parseInt(($(this).css('width').replace('px',''))
                        + parseInt(Math.floor((tableWidth - tableTr0Width) / tableThNum))) + 'px');
                    });
                }
            } else { // header and body
                tableTr1Width = $('.table-scroll tr:eq(1)').css('width');
                    $('.table-scroll tr:eq(1)').children('td').each(function(i){
                    tableTdWidths[i]=$(this).css('width').replace('px','');
                });
                $('.table-scroll tr:eq(0)').children('th').each(function(i) {
            if(parseInt($(this).css('width').replace('px', '')) >
                parseInt(tableTdWidths[i])) {
                tableTdWidths[i] = $(this).css('width').replace('px','');
                    }
                });

                if (tableWidth > tableTr1Width) {
                    //set all th td width
                    $('.table-scroll tr').each(function(i){
                            $(this).children().each(function(j){
                                $(this).css('min-width',(parseInt(tableTdWidths[j])
                                + parseInt(Math.floor((tableWidth - tableTr1Width) /
                                tableThNum))) + 'px');
                            });
                    });
                } else {
                    //method 1 : set all th td width
                    $('.table-scroll tr').each(function(i){
                            $(this).children().each(function(j){
                                $(this).css('min-width',tableTdWidths[j] + 'px');
                            });
                    });
                }
            }
            });
    </script>
</head>
<body>
<table class="am-table am-table-striped am-table-hover table-main">
<thead>
<tr>
    <marquee direction="left">
        <th class="table-check"><input type="checkbox" /></th>
        <th class="table-id">序号</th>
        <th class="table-title">姓名</th>
        <th class="table-title">余额</th>
        <th class="table-type">编号</th>
        <th class="table-author am-hide-sm-only">电话</th>
        <th class="table-date am-hide-sm-only">修改日期</th>
    </marquee>

</tr>
</thead>
<tbody>
    <tr>
        <marquee direction="left">
            <td><input type="checkbox" /></td>
            <td>1</td>
            <td>徐全</td>
            <td>75 RMB</td>
            <td class="am-hide-sm-only">S47</td>
            <td class="am-hide-sm-only">13180900311</td>
            <td class="am-hide-sm-only">2018-12-13</td>
            <td>
                <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                    </div>
                </div>
            </td>
    </tr>
        </marquee>

</tbody>
</table>
</body>
</html>